<template>
	<div class="goods-item">
		<div class="goods-images">
			<img class="goods-img" v-lazy="item.pic" />
			<div class="mask" v-if="item.receiveStatus == 1 || item.receiveStatus == 2 || item.receiveStatus == 3">
				<div class="circular-wrap">
					<div class="circular-inner">已抢完</div>
				</div>
			</div>
			<div class="goods-flash-sale-ok" v-if="item.hasBuy == 1">您已抢<i @click="$emit('todayPay')" class="iconfont icon-gantan i"></i></div>
		</div>
		<div class="goods-content">
			<h2 class="goods-name">
				<svg-icon v-if="item.shoptype == 1" class="icon" iconName="tm"></svg-icon>
				<svg-icon v-if="item.shoptype == 0" class="icon" iconName="tb"></svg-icon>
				<span>{{ item.title }}</span>
			</h2>
			<div class="goods-info">
				<div class="discount">
					<div class="coupon" v-if="item.couponMoney != 0">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						{{ item.couponMoney }}元券
					</div>
					<div class="subsidy">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						补贴¥{{ item.allowanceMoney | Fixed(2) }}
					</div>
					<div class="subsidy" v-if="item.tljMoney != 0">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						淘礼金¥{{ item.tljMoney | Fixed(2) }}
					</div>
				</div>
			</div>
			<div class="base-flex price-box" :style="{ 'margin-top': item.timeStatus == 0 || item.timeStatus == 2 ? '20px' : '' }">
				<div>
					<div class="goods-price">
						<div class="deal">
							到手价<b>¥</b
							><span class="span">{{
								(item.endPrice - Number(item.mdMoney ? item.mdMoney : 0) - Number(item.tljMoney ? item.tljMoney : 0)) | Fixed(2)
							}}</span>
						</div>
						<p class="p">{{ item.price | Fixed(2) }}</p>
					</div>
					<div class="progress-warp" v-if="item.timeStatus == 1">
						<div
							class="progress-line"
							v-if="item.receiveStatus == 0"
							:style="{ width: 100 - (item.surplus / item.total) * 100 + '%' }"
						></div>
						<div class="progress-line" v-else style="width:100%"></div>
						<div class="progress-line-c"></div>
					</div>
				</div>
				<div class="price-btn">
					<div
						class="buy"
						v-if="item.timeStatus == 1"
						:class="[
							{
								disabled:
									(item.surplusNum === 0 || item.receiveStatus === 3 || item.receiveStatus === 2 || item.receiveStatus === 1) &&
									item.hasBuy == 0
							}
						]"
					>
						<div class="copy-tkl" @click.stop="buyProduct" v-if="item.hasBuy === 0">
							<svg-icon
								v-if="
									(item.surplusNum === 0 || item.receiveStatus === 3 || item.receiveStatus === 2 || item.receiveStatus === 1) &&
										item.hasBuy == 0
								"
								class="icon"
								iconName="shandiangrey"
							></svg-icon>
							<svg-icon v-else class="icon" iconName="shandian"></svg-icon>
							<span>
								立即抢
							</span>
						</div>
						<div class="copy-tkl" @click="payCopyTkl" v-if="item.hasBuy === 1">
							<span>
								复制淘口令
							</span>
						</div>
					</div>
					<div class="no-start" @click="waitTime" v-if="item.timeStatus == 0">
						<i class="iconfont icon-jijiangkaishi i"></i>
						<span>即将开始</span>
					</div>
					<div
						class="buy"
						:style="{ top: item.timeStatus == 0 || item.timeStatus == 2 ? '0px' : '' }"
						v-if="item.timeStatus == 2"
						:class="[{ disabled: item.hasBuy === 0 }]"
					>
						<div class="copy-tkl" @click="$emit('over')" v-if="item.hasBuy === 0">
							<span>
								已结束
							</span>
						</div>
						<div class="copy-tkl" @click="payCopyTkl" v-if="item.hasBuy === 1">
							<span>
								复制淘口令
							</span>
						</div>
					</div>
				</div>
			</div>
			<div v-if="item.timeStatus == 1" class="surplus">已抢{{ (100 - (item.surplus / item.total) * 100).toFixed(2) }}%</div>
		</div>

		<!--复制成功-->
		<van-popup class="copy-popups" get-container="body" v-model="visible" @close="close">
			<div class="main">
				<p class="title">
					打开【淘宝】购买吧
				</p>
				<p class="time">
					请在
					<van-count-down :time="couponEndtime" format="DD天HH时mm分" />前购买
				</p>
			</div>
		</van-popup>
		<!--复制成功-->
		<van-popup class="copy-popup" get-container="body" v-model="visiblet" closeable @close="close">
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
				<p class="time">
					优惠券到期时间<br />
					<van-count-down :time="couponEndtime" format="DD 天 HH 时 mm 分 ss 秒" />
				</p>
			</div>
		</van-popup>

		<authorize-dig ref="authorizeDig"></authorize-dig>
	</div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { AuthorizeDig } from '@/components';
import { Popup, CountDown } from 'vant';
export default {
	name: 'GoodsItem',
	components: {
		'van-popup': Popup,
		AuthorizeDig,
		'van-count-down': CountDown
	},
	data() {
		return {
			msgVisible: false,
			msg: '',
			visible: false,
			visiblet: false,
			couponEndtime: 0,
			norefresh: false
		};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {
		let couponEndtime = parseInt(this.item.couponEndtime);
		let todayTime = parseInt(moment(moment().format('YYYY-MM-DD 23:59:59')).format('X'));
		// 展示时间和 取活动时间和优惠券时间 小的一个
		let endTime = couponEndtime > todayTime ? todayTime : couponEndtime;
		this.couponEndtime = (endTime - parseInt(moment().format('X'))) * 1000;
	},
	methods: {
		copyTkl(tkl) {
			window.BestpayHtml5.System.setClipboardContent(
				{
					data: tkl || '复制错误'
				},
				() => {
					this.visible = true;
					setTimeout(() => {
						this.visible = false;

						this.close();
					}, 5000);
				}
			);
		},
		payCopyTkl() {
			this.norefresh = true;
			window.BestpayHtml5.System.setClipboardContent(
				{
					data: this.item.tkl
				},
				() => {
					this.visiblet = true;
					setTimeout(() => {
						this.visiblet = false;

						this.close();
					}, 5000);
				}
			);
		},
		close() {
			// 更新用户信息
			this.$store.dispatch('GET_USERINFO');
			if (this.norefresh) {
				return;
			}
			// 触发列表刷新
			this.$emit('refreshList');
		},
		waitTime() {
			this.$emit('waitTime');
		},
		buyProduct() {
			let self = this;
			if ((this.item.receiveStatus === 2 || this.item.receiveStatus === 1 || this.item.receiveStatus === 3) && this.item.hasBuy === 1) {
				return false;
			}
			if (this.userInfo.tbStatus === 1) {
				this.$service.shopping.goods
					.flashBuy({
						id: this.item.id,
						app: 'yzf',
						title: this.item.title,
						url: this.item.url,
						pic: this.item.pic,
						shoptype: this.item.shoptype,
						endPrice: this.item.endPrice,
						couponPrice: this.item.couponPrice,
						tljBatchId: this.item.tljBatchId,
						tljMoney: this.item.tljMoney
					})
					.then(res => {
						console.log(res);
						self.copyTkl(res);
						// this.$emit('refreshList');

						// this.$toast('抢购成功请到到我的抢购>复制淘口令到淘宝购买');
					})
					.catch(err => {
						this.$toast(err.message);
					});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);
	height: 294px;
	border-radius: 16px;
	padding: 28px 22px 22px 20px;
	.goods-images {
		width: 220px;
		height: 220px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		@include flexBox(center, center);
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			@include flexBox(center, center);
			.circular-wrap {
				width: 110px;
				height: 110px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transform: rotate(-24deg);
				@include flexBox(center, center);
				.circular-inner {
					width: 90px;
					height: 86px;
					border: 2px solid $color-white;
					border-radius: 50%;
					font-size: 18px;
					color: $color-white;
					@include flexBox(center, center);
				}
			}
		}
	}
	.goods-content {
		height: 240px;
		flex: 1;
		margin-left: 15px;
		// margin-top: -15px;

		.goods-name {
			font-size: 0px;
			line-height: 36px;
			color: $text-black;
			@include ellipsis(2);
			margin-bottom: 12px;
			.icon {
				font-size: 28px;
			}
			span {
				font-size: 28px;
			}
		}
		.goods-info {
			margin-bottom: 30px;
			@include flexBox(space-between, center);
			.discount {
				height: 28px;
				display: flex;
				.coupon {
					line-height: 28px;
					padding: 0 18px;
					background: $main-color;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: $color-white;
					position: relative;
					// margin-right: 20px;
				}
				.subsidy {
					line-height: 28px;
					padding: 0 18px;
					background: #ffeed1;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: #925114;
					position: relative;
					margin-left: 20px;
				}
				.circle-left {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					left: -6px;
				}
				.circle-right {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					right: -6px;
				}
			}
			.sale {
				font-size: 20px;
				color: $text-grey;
			}
		}
		.price-box {
			@include flexBox(space-between, center);
		}
		.goods-price {
			color: #f70114;
			font-size: 22px;
			@include flexBox(null, center);

			.deal {
				.span {
					font-size: 30px;
				}
			}
			.p {
				margin-top: 8px;
				color: #c3c3c3;
				text-decoration: line-through;
				margin-left: 15px;
			}
		}
	}
}
.progress-warp {
	position: relative;
	width: 234px;
	height: 16px;
	background: rgba(235, 235, 235, 1);
	border-radius: 16px;
	margin-bottom: 8px;
	.progress-line {
		width: 158px;
		height: 16px;
		background: linear-gradient(270deg, rgba(247, 1, 20, 1) 0%, rgba(255, 130, 38, 1) 100%);
		border-radius: 16px;
	}
}
.surplus {
	font-size: 16px;
	font-weight: 400;
	height: 30px;
	line-height: 20px;
	color: rgba(132, 132, 132, 1);
}

.buy {
	height: 68px;
	color: $color-white;
	font-size: 20px;
	width: 144px;
	// border-radius: 16px;
	// @include flexBox(center, center, column);
	// border: 2px solid rgba(255, 78, 73, 1);
	// min-width: 136px;
	// max-width: 145px;
	// overflow: hidden;
	// i {
	// 	font-size: 20px;
	// }
	margin-left: 25px;
	position: relative;
	top: 30px;
	z-index: 999;
	.copy-tkl {
		// width: 144px;
		height: 34px;
		line-height: 34px;
		font-size: 20px;

		display: block;
		color: #fff;
		height: 50px;
		line-height: 50px;
		background: linear-gradient(270deg, rgba(255, 72, 74, 1) 0%, rgba(255, 80, 73, 1) 100%);
		border-radius: 28px;
		// padding: 1px 15px;
		text-align: center;
		@include flexBox(center, center);

		.icon {
			font-size: 22px;
			position: relative;
			top: -1px;
			color: #fff;
		}
		span {
			letter-spacing: 0.5px;
			// position: relative;
			// left: -5px;
			// top: -1px;
		}
	}
	.surplus-num {
		font-size: 20px;
		width: 100%;
		height: 34px;
		line-height: 34px;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		background-color: #fff;
		color: #ff4e49;
		span {
			width: 100%;
			transform: scale(0.9, 0.9);
			text-align: center;
			display: block;
		}
	}
	&.disabled {
		border-color: #ebebeb;
		.copy-tkl {
			background: #ebebeb;
			color: #7b7b7b;
		}
		.surplus-num {
			color: #7b7b7b;
		}
	}
}

.no-start {
	// width: 144px;
	padding: 1px 20px;
	height: 50px;
	line-height: 50px;
	border: 2px solid rgba(255, 68, 0, 1);
	border-radius: 28px;
	color: #ff4400;
	font-size: 20px;
	@include flexBox(center, center);
	.i {
		margin-right: 3px;
		font-size: 24px;
	}
}

.status-over {
	width: 122px;
	height: 50px;
	line-height: 50px;
	background: rgba(235, 235, 235, 1);
	border-radius: 28px;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	margin-left: 15px;
	position: relative;
	top: 30px;
}

.goods-flash-sale-ok {
	width: 100%;
	height: 60px;
	line-height: 60px;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 24px;
	text-align: center;
	color: #fff;
	background: linear-gradient(360deg, rgba(88, 88, 88, 1) 0%, rgba(84, 84, 84, 0) 100%);
	border-radius: 0px 0px 16px 16px;
	.i {
		font-size: 26px;
	}
}

@supports (bottom: env(safe-area-inset-bottom)) {
	.back-home {
		margin-bottom: env(safe-area-inset-bottom);
	}
}

.copy-popups {
	width: 434px;
	height: 500px;
	border-radius: 16px;
	background: transparent;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		background: url('../../../../assets/images/index/special/grabg.png');
		background-size: 100% 100%;
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			margin-top: 350px;
			margin-bottom: 10px;
		}
		.time,
		.van-count-down {
			font-size: 22px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
			font-weight: 400;
			line-height: 26px;
			color: rgba(255, 255, 255, 1);
		}
		.time {
			display: flex;
			letter-spacing: 1px;
		}
	}
}
.comfirm-popup {
	width: 580px;
	border-radius: 16px;
	.main {
		h2 {
			text-align: center;
			font-size: 32px;
			font-weight: 600;
			margin: 30px 0;
			color: #000;
		}
		span {
			color: $color-red;
		}
		.text {
			font-size: 28px;
			color: #5b5b5b;
			padding: 0 40px;
		}
		.tips {
			padding: 0 40px;
			margin-top: 20px;
			text-align: left;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.footer {
			margin-top: 30px;
			border-top: 2px solid #f7f7f7;
			display: flex;
			a {
				width: 50%;
				line-height: 102px;
				font-size: 32px;
				color: #a3a3a3;
				display: block;
				text-align: center;
			}
			.submit {
				color: $main-color;
				border-left: 2px solid #f7f7f7;
			}
		}
	}
}

.copy-popup {
	width: 452px;
	height: 428px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
		.time,
		.van-count-down {
			font-size: 24px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
		}
	}
}
</style>
